<template>
  <div id="wrap">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider :trigger="null" collapsible v-model="collapsed">
        <pageMenu :collapsed="collapsed"></pageMenu>
      </a-layout-sider>
      <!-- <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <pageMenu :collapsed="collapsed"></pageMenu>
      </a-layout-header> -->
      <a-layout>
        <pageTop :collapsed="collapsed" @colla="colla"></pageTop>
        <a-layout-content class="layoutContent"
        :style="{margin: '24px 16px', padding: '40px', background: '#fff'}"
        >
          <a-config-provider :locale="zh_CN">
            <transition name="slide-fade" mode="out-in">
              <router-view />
            </transition>
          </a-config-provider>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import pageTop from "../commonComponents/page-top.vue";
import pageMenu from "../commonComponents/page-menu.vue";
import { mapState } from "vuex";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale('zh-cn')
export default {
  name: "wrap",
  data() {
    return {
      zh_CN,
      collapsed: false
    };
  },
  components: {
    pageTop,
    pageMenu
  },
  computed: {
    ...mapState({
      screenWidth: state => state.screen.screenWidth > 1120
    })
  },
  created() {
      var _this = this
      window.onresize = function(){ // 定义窗口大小变更通知事件
      _this.$store.dispatch('updateScreenWidth', document.documentElement.clientWidth)
    }
    //   console.log(this.screenWidth)
    this.collapsed = document.documentElement.clientWidth <= 1120;
  },
  mounted() {},
  methods: {
    colla() {
      this.collapsed = !this.collapsed;
    }
  },
  watch: {
    screenWidth(val) {
      this.collapsed = !val;
    }
  }
};
</script>

<style lang="less" scoped>
#wrap {
  height: 100%;
  .layoutContent{
    margin: '24px 16px';
    padding: '40px';
    background: '#fff';
  }
  /deep/ .ant-layout-header {
    height: auto;
  }
  /deep/ .ant-btn {
    border-radius: 5px;
  }
}
#components-layout-demo-custom-trigger {
  min-height: 100%;
}
</style>
